<template>
  <div class="newLayoutStyle landTastDetail">
    <main-layout>
      <bar-title title="任务详情" back />
      <div class="itemBox" style="margin-top:12px">
        <ul class="itemList">
          <li>作业阶段：<span>{{ details.stageName }}</span></li>
          <li>作业流程：<span>{{ details.taskName }}</span></li>
          <li>农事状态：
            <tast-status :code="details.taskStatus" :show-dot="false" />
          </li>
        </ul>
        <ul class="itemList">
          <li>农事位置：</li>
        </ul>
        <div>
          <vxe-table
            border
            show-overflow
            size="small"
            :min-height="80"
            :height="taskLandRspList.length>10?440:(taskLandRspList.length*45)"
            :row-config="{isHover: true}"
            :data="taskLandRspList.slice(0, showLength)"
            :scroll-y="{enabled: true}">
            <vxe-column align="center" title="地块编号" width="120" field="farmLandNo" />
            <vxe-column align="left" title="地块名称"  width="160" field="farmLandName" />
            <vxe-column align="center" title="地块面积(亩)" width="110" field="mapAreaSize" />
            <vxe-column align="center" title="地块类型" width="100" field="landTypeName" />
            <vxe-column align="center" title="地块地质" width="90" field="geologyName" />
            <vxe-column align="center" title="地块分组" width="150" field="groupName" />
            <vxe-column align="left" title="位置" field="locationAddress" />
            <vxe-column align="center" title="备注" width="120" field="landRemark" />
          </vxe-table>
        </div>
        <div class="btn-more" @click="btnMore" v-if="taskLandRspList.length>10">
          {{showLength<taskLandRspList.length?'展开':'收缩'}}
          <el-icon size="18px" style="margin-right:5px;"> 
             <ArrowDown v-if="showLength<taskLandRspList.length" />
             <ArrowUp v-else />
          </el-icon>
        </div>
        <ul class="itemList" style="display:block;">
          <li>完成日期：<span>{{ formatDate(details.taskStartTime) }} ~ {{ formatDate(details.taskEndTime) }}</span></li>
          <li>负责人：
            <span style="padding-top:4px" v-for="(dt,index) in JSON.parse(details.fuzeUserJstr||'{}').fzuserLineRspList" :key="dt.userId">
              {{ dt.realName }}
              <template v-if="index<JSON.parse(details.fuzeUserJstr||'{}').fzuserLineRspList.length-1">、</template>
            </span>
          </li>
          <li>作业内容：</li>
        </ul>
        <div class="taskContent" style="white-space:pre-line;" v-html="details.taskContent" />
      </div>
      <bar-title title="农事处理" style="background:none;margin:10px 0" />
      <div v-if="details.taskStatus=='YCL'||details.taskStatus=='YWC'">
        <div class="fgLine" />
        <div class="itemBox">
          <ul class="itemList">
            <li>处理结果：</li>
          </ul>
          <div class="cljgTable">
          <vxe-table
            border
            style="width:100%;"
            show-overflow
            size="small"
            :min-height="80"
            :max-height="300"
            :row-config="{isHover: true}"
            :data="planteds"
            :scroll-y="{enabled: true}">
             <vxe-column align="center" title="日期"  field="createTime">
               <template #default="{ row }">
                {{formatDate(row.createTime)}}
                </template>
            </vxe-column> 
            <vxe-column align="left" title="作业地块"  field="farmLandName">
              <template #default="{ row }">
                {{ row.landCount }}地块、{{row.landArea}}亩
                </template>
            </vxe-column> 
            <vxe-column align="center" title="农事类型"  field="farmingName" />
            <vxe-column align="center" title="生育时期"  field="shengyuqiName" />
            <vxe-column align="center" title="作业方式"  field="methodName" />
            <vxe-column align="center" title="现场记录"  field="landRemark">
              <template #default="{row}">
                <el-button type="text" icon="view" class="btn-view" size="small" @click="lookDetail(row)">查看明细</el-button>
                </template>
              </vxe-column>
          </vxe-table>
          </div>
        </div>
      </div>
    </main-layout>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import mainLayout from '@/components/custom/mainLayout.vue'
import { getPlantLinelistDetail, getPlantedList,getFzuserList,getTaskLandList} from '@/api/plant'
import barTitle from './components/barTitle.vue'
import tastStatus from './components/tastStatus.vue'
import { formatDate } from '@/utils/format'
import { useUserStore } from '@/pinia/modules/user'
const route = useRouter()
const userStore = useUserStore()

const plantingPlanTaskId = ref('')
const details = ref({})
const planteds = ref([])
const taskFzuserRspList = ref([])
const taskLandRspList = ref([])
const showLength = ref(10)

onMounted(async() => {
  const { currentRoute } = route
  plantingPlanTaskId.value = currentRoute.value.query.plantingPlanTaskId
  const res = await getPlantLinelistDetail(plantingPlanTaskId.value)
  if(res.success){
    details.value = res.data
    get_task_land(res.data.plantingPlanId,res.data.plantingPlanTaskId)
  }
  // 处理列表
  getPlantedList({
    farmId: userStore.userInfo.farmId,
    companyId: userStore.userInfo.companyId,
    queryEntry: 1, // 种植后台固定为1
    plantingPlanTaskId: plantingPlanTaskId.value
  }).then(res => {
    if(res.success){
      planteds.value = res.data ||[]
    }
  })
  
})
 const getMapAreaSizeTotal=(list)=>{
  let total =0
  list.forEach(item => {
    total += Number(item.mapAreaSize||0)
  });

  return Number(total.toFixed(2))
 }

const get_task_land = async (plantingPlanId,plantingPlanTaskId)=>{
  const res = await getTaskLandList({
    limit:10000,
    page:1,
    plantingPlanId,
    plantingPlanTaskId
  })
  if(res.success){
    taskLandRspList.value = res.data || []
  }
}

const btnBack = () => {
  route.push({
    name: 'manage/task/list'
  })
}
const btnMore = () => {
  if(showLength.value>=taskLandRspList.value.length){
    showLength.value = 10
  }else{
    showLength.value = taskLandRspList.value.length
  }
}


const lookDetail = (item)=>{
  if(item.farmingType==2){
    route.push(`/manage/crop/index?plantingPlanTaskRecordId=${item.plantingPlanTaskRecordId}&companyId=${item.companyId}&farmId=${item.farmId}`)
  }else{
    route.push(`/manage/record/index?plantingPlanTaskRecordId=${item.plantingPlanTaskRecordId}&companyId=${item.companyId}&farmId=${item.farmId}`)
  }
}
</script>

<style lang="scss" scoped>
.btn-more{
  display: flex;
  justify-content: center;
  font-size: 14px;
  align-items: center;
  cursor: pointer;
  margin: 20px 0;
  color: #35ADB2;
}
.itemBox{
    background: #F7F7F7;
    border-radius: 0px 2px 2px 0px;
    border: 1px solid #EEEEEE;
    padding: 20px;
    .itemList{
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0 0 10px 0;
        li{
            display: flex;
            align-items: center;
            flex: 1;
            flex-shrink: 0;
            flex-wrap: wrap;
            height: 30px;
            font-size: 14px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 700;
            color: #333333;
            &::before{
                content: '';
                width: 5px;
                height: 5px;
                line-height: 0;
                overflow: hidden;
                border-radius: 50%;
                background-color: #999999;
                margin: 0 6px 0 0;
            }
            span{
                color: #999;
                font-weight:500
            }
        }
    }
    .taskContent{
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
        padding: 0 0 0 12px;
    }
}
.fgLine{
    height: 1px;
    line-height: 0;
    overflow: hidden;
    background-color: #EDEDED;
    margin: 0 0 12px 0;
}
</style>
<style lang="scss">
.landTastDetail{
    .el-table{
        .thead{
            .el-table__cell{
                background-color: #F0F0F0;
            }
        }
    }
}
.cljgTable{
    .el-table--border{
        margin-bottom:0!important;
    }
}
.xuntiantags{
            display: inline-block;
            padding: 0 3px;
            margin: 0 0 0 2px;
            border: 1px solid #999;
            height: 20px;
            line-height: 18px;
            padding: 0 7px;
            min-width: 40px;
            text-align: center;
            border-radius: 10px;
            box-sizing: border-box;
            white-space: nowrap;
            font-size: 12px;
            &+.tags{
                margin-left: 5px;
            }
            &.EXUBERANT{
                background: #d1992520;
                border: 1px solid #d19925;
            }
            &.ROBUST{
                background: #E6F6F0;
                border: 1px solid #A7E2CC;
            }
            &.MEDIUM{
                background: #F1F8F5;
                border: 1px solid #C9E6D6;
            }
            &.BAD{
                background: #FEEFEF;
                border: 1px solid #FBBEBE; 
            }
        }
</style>
